<template>
    <div class="qq-list">
        <div>
            <div>
                <div id="img0" class="pc-qq-item" @mouseenter="showText('img0')" @mouseleave="hideText('img0')">
                    <div class="pc-qq-item-phone">
                        <div class="pc-qq-item-phoneTitle">联系客服</div>
                        <div class="pc-qq-item-pnoneNumber">
                            <i aria-label="icon: qq" class="anticon anticon-qq">
                                <svg viewBox="64 64 896 896" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                    <path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"></path>
                                </svg>
                            </i> 805544861 
                        </div>
                    </div>
                    <img id="img0-img" src="" alt="">
                    <div id="img0-text" style="display: none;">客服1</div>
                </div>
            </div>
            <div>
                <div id="img1" class="pc-qq-item" @mouseenter="showText('img1')" @mouseleave="hideText('img1')">
                    <div class="pc-qq-item-phone pc-qq-item-phone1">
                        <div class="pc-qq-item-phoneTitle">联系客服</div>
                        <div class="pc-qq-item-pnoneNumber">
                            <i aria-label="icon: phone" class="anticon anticon-phone">
                                <svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                    <path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path>
                                </svg>
                            </i> 18833103577 
                        </div>
                    </div>
                    <i id="img1-img" aria-label="icon: phone" class="phoneIcon anticon anticon-phone">
                        <svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                            <path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path>
                        </svg>
                    </i>
                    <div id="img1-text" style="display: none;">客服2</div>
                </div>
            </div>
            <div>
                <div id="img2" class="pc-qq-item" @mouseenter="showText('img2')" @mouseleave="hideText('img2')">
                    <div class="pc-qq-item-phone pc-qq-item-phone1">
                        <div class="pc-qq-item-phoneTitle">技术支持</div>
                        <div class="pc-qq-item-pnoneNumber" >
                            <i aria-label="icon: phone" class="anticon anticon-phone">
                                <svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                    <path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path>
                                </svg>
                            </i> 15733157255 
                        </div>
                    </div>
                    <img id="img2-img" src="" alt="">
                    <div id="img2-text" style="display: none; width: 40px;">技术<br>支持</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
            };
        },
        components: {},
        methods: {
            showText(id) {
                const imgElement = document.getElementById(`${id}-img`);
                const textElement = document.getElementById(`${id}-text`);
                if (imgElement) {
                    imgElement.style.display = 'none';
                }
                if (textElement) {
                    textElement.style.display = 'block';
                }
            },
            hideText(id) {
                const imgElement = document.getElementById(`${id}-img`);
                const textElement = document.getElementById(`${id}-text`);
                if (imgElement) {
                    imgElement.style.display = '';
                }
                if (textElement) {
                    textElement.style.display = 'none';
                }
            }
        },
    };
</script>
<style lang="scss" scoped>
.qq-list {
    list-style: none;
    position: fixed;
    bottom: 35vh;
    right: 20px;
    z-index: 888;
    >div:first-child {
        border-radius: 5px 5px 0 0;
        >div{
            width: 50px;
            position: relative;
            &:hover .pc-qq-item-phone1 {
                opacity: 1;
                pointer-events: auto;
            }
        }
        .pc-qq-item {
            background-color: #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            text-align: center;
            margin-bottom: 15px;
            display: flex;
            line-height: 15px;
            justify-content: center;
            align-items: center;
            color: #01ac74;
            box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
            // position: relative;
            #img0:hover>.pc-qq-item-phone {
                display: none !important;
            }
            .anticon-phone {
                rotate: 90deg;
                font-size: 26px;
                color: #3c3d3d;
            }
            .pc-qq-item-phone {
                // display: none;
                width: 170px;
                position: absolute;
                right: 120%;
                top: -2px;
                background-color: #fff;
                border-radius: 8px;
                padding: 8px 5px;
                box-shadow: 0 .1vw .5vw 0 rgba(0, 0, 0, .09);
                opacity: 0;
                pointer-events: none;
                .pc-qq-item-phoneTitle {
                    width: 100%;
                    font-size: 18px;
                    font-weight: 500;
                    color: #333;
                }
                .pc-qq-item-pnoneNumber {
                    color: #e84055;
                    margin-top: 10px;
                    font-size: 20px;
                    white-space: nowrap;
                    .anticon-qq {
                        color: #3c3d3d;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    .anticon-phone{
                        font-size: 16px;
                        font-weight: 400;
                        color: #3c3d3d;
                    }
                    .anticon {
                        display: inline-block;
                        font-style: normal;
                        line-height: 0;
                        text-align: center;
                        text-transform: none;
                        vertical-align: -.125em;
                    }
                }
            }
        }
    }
}
#img0-text {
    display: none;
    text-align: center;
    font-size: 14px;
    width: auto; /* 让宽度自适应内容 */
    white-space: nowrap; /* 防止文本换行 */
}
#img2-text {
    display: none;
    text-align: center;
    font-size: 14px;
    width: auto; /* 让宽度自适应内容 */
    white-space: nowrap; /* 防止文本换行 */
}
.pc-qq-item{
    position: relative;
}
.pc-qq-item-phone::before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    top: 20px;
    right: -10px;
    background-color: #fff;
    transform: translateX(-20%) rotate(45deg);
}
.mb-3>.btText::before {
    content: "* ";
    color: red;
}
</style>